<template>
  <view>
    <u-popup
      v-model="show"
      mode="bottom"
      border-radius="14"
      @maskClick="closePaySuccessFn"
    >
      <view class="paySuccess_box">
        <div class="paySuccess_tit_box">
          <i class="iconfont icon-checkbox_fill"></i><span>支付成功</span>
        </div>
        <div class="goods_layout">
          <div class="goods_msg_box">
            <div class="goods_msg_box_l">
              <img
                class="img_box"
                :src="
                  orderDetailsData.orderGoodsDetailsRespVOList[0].goodsImages
                "
                mode="aspectFill"
                alt=""
              />
            </div>
            <div class="goods_msg_box_r">
              <div class="goods_title">
                {{ orderDetailsData.orderGoodsDetailsRespVOList[0].goodsName }}
              </div>
              <div class="goods_other">
                <span>{{
                  orderDetailsData.orderGoodsDetailsRespVOList[0].skuName
                }}</span
                ><i
                  >x{{
                    orderDetailsData.orderGoodsDetailsRespVOList[0].count
                  }}</i
                >
              </div>
            </div>
          </div>
          <div class="payment_msg_box">
            共{{ orderDetailsData.count }}件，实际支付:
            <i>￥{{ orderDetailsData.payPrice || 0.0 }}</i>
          </div>
        </div>
        <div class="order_layout">
          <div class="order_tit">订单信息</div>
          <div class="order_msg_box">
            <div class="order_msg_box_l">
              <i class="iconfont icon-user"></i>
            </div>
            <div class="order_msg_box_r">
              <p>
                <span>{{ orderDetailsData.receiveName }}</span
                ><i v-if="orderDetailsData.receiveMobile">{{
                  orderDetailsData.receiveMobile
                }}</i>
              </p>
              <p v-if="orderDetailsData.receiveAddress">
                {{ orderDetailsData.receiveAddress }}
              </p>
            </div>
          </div>
          <div class="order_msg_box" v-if="orderDetailsData.remark">
            <div class="order_msg_box_l">
              <i class="iconfont icon-text"></i>
            </div>
            <div class="order_msg_box_r">
              <p>备注：{{ orderDetailsData.remark }}</p>
            </div>
          </div>
          <div class="order_msg_box">
            <div class="order_msg_box_l">
              <i class="iconfont icon-order"></i>
            </div>
            <div class="order_msg_box_r">
              <p>
                订单编号：{{ orderDetailsData.orderAllId
                }}<button
                  class="copy_btn"
                  hover-class="hover"
                  @click.stop="_copyOrderNo(orderDetailsData.orderAllId)"
                >
                  复制
                </button>
              </p>
            </div>
          </div>
        </div>
        <div class="btn_list_box">
          <button
            class="btn_box"
            hover-class="hover"
            @click.stop="connectionFn"
          >
            联系团长
          </button>
          <button
            class="btn_box btn_box_r"
            hover-class="hover"
            @click.stop="goToOrderDetailsFn"
          >
            订单详情
          </button>
        </div>
      </view>
    </u-popup>
    <!-- <u-popup v-model="attentionShow" mode="center" border-radius="16" @maskClick="attentionShow = false">
      <view class="attentionBox">
        <view class="closeBox" @click="attentionShow = false">
          <u-icon name="close" size="20" color="#969799" />
        </view>
        <view class="title">关注团长</view>
        <view class="conten">商品发货后即时通知你</view>
        <view class="lijiguanzhu" @click="_handleAttention">立即关注</view>
      </view>
    </u-popup> -->
  </view>
</template>
<script>
// import dynamic from '@/api/dynamic.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    orderDetailsData: {
      type: Object,
      default: {},
    },
    item: {
      type: Object,
      default: {},
    }
  },
  // watch: {
  //   show(nval,oval){
  //     if(nval && this.item.isMyself !== 1 && this.item.followStatus === 0){ // 支付成功且不是自己且未关注团长 // 0未关注1已关注2互相关注
  //       this.attentionShow = true
  //     }
  //   }
  // },
  data() {
    return {
      // attentionShow: false,
    };
  },
  // inject: ['attention'],
  methods: {
    closePaySuccessFn() {
      this.$emit("closePaySuccessFn");
    },
    connectionFn() {
      this.$emit("connectionFn");
    },
    goToOrderDetailsFn() {
      this.$emit("goToOrderDetailsFn");
    },
    _copyOrderNo(id) {
      uni.setClipboardData({
        data: id,
        showToast: false,
        success: function () {
          uni.showToast({
            title: "单号已复制",
            icon: "success",
          });
        },
      });
    },
    // 立即关注
    // _handleAttention(){
    //   this.attentionShow = false
    //   this.attention(1)
    // }
  },
};
</script>

<style lang="scss" scoped>
.paySuccess_box {
  width: 100vw;
  height: 70vh;
  background: #f2f3f5;
  position: relative;
  .paySuccess_tit_box {
    background-color: #fff;
    padding: 68rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-checkbox_fill {
      font-size: 64rpx;
      margin-right: 24rpx;
      color: #e44435;
    }
    span {
      font-size: 48rpx;
      color: #323232;
    }
  }
  .goods_layout {
    background-color: #fff;
    margin: 16rpx 0;
    .goods_msg_box {
      padding: 24rpx;
      display: flex;
      flex: 1;
      box-shadow: inset 0rpx -2rpx 0rpx #eeeeee;
      .goods_msg_box_l {
        flex: 0 0 auto;
        width: 144rpx;
        height: 144rpx;
        margin-right: 24rpx;
        .img_box {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
      .goods_msg_box_r {
        width: 532rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        .goods_other {
          display: flex;
          align-items: center;
          justify-content: space-between;
          span {
            font-size: 20rpx;
            padding: 6rpx 16rpx;
            color: #969799;
            background: #f5f5f5;
            border-radius: 4rpx;
          }
          i {
            font-size: 28rpx;
            color: #323232;
          }
        }
      }
    }
    .payment_msg_box {
      padding: 24rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 24rpx;
      color: #323232;
      i {
        font-size: 32rpx;
        color: #e44435;
      }
    }
  }
  .order_layout {
    background: #fff;
    .order_tit {
      padding: 26rpx 32rpx;
      color: #323233;
      font-size: 32rpx;
      font-weight: bolder;
    }
    .order_msg_box {
      display: flex;
      padding: 8rpx 32rpx;
      .order_msg_box_l {
        margin-right: 16rpx;
        .iconfont {
          font-size: 28rpx;
          color: #323233;
        }
      }
      .order_msg_box_r {
        font-size: 24rpx;
        color: #969799;
        p {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding-bottom: 8rpx;
          .copy_btn {
            margin-left: 12rpx;
            font-size: 24rpx;
            padding: 0 8rpx;
            line-height: 28rpx;
            background: none;
            text-align: center;
            border: 2rpx solid #eee;
          }
        }
      }
    }
  }
  .btn_list_box {
    background-color: #fff;
    width: 100%;
    padding: 24rpx 0;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    align-items: center;
    .btn_box {
      padding: 12rpx 52rpx;
      color: #e44435;
      font-size: 28rpx;
      line-height: 40rpx;
      border: 2rpx solid #e44435;
      box-sizing: border-box;
      border-radius: 32rpx;
      &.btn_box_r {
        margin-left: 40rpx;
      }
    }
  }
}
.attentionBox {
  position: relative;
  width: 622rpx;
  .closeBox {
    padding: 6rpx 20rpx 20rpx 20rpx;
    position: absolute;
    top: 0;
    right: 0;
  }
  .title {
    padding-top: 48rpx;
    font-size: 36rpx;
    text-align: center;
    font-weight: 500;
  }
  .conten {
    font-size: 32rpx;
    color: #969799;
    text-align: center;
    padding-top: 16rpx;
    padding-bottom: 48rpx;
  }
  .lijiguanzhu {
    text-align: center;
    color: #e44435;
    font-weight: 500;
    border-top: 1px solid #ebedf0;
    line-height: 96rpx;
    font-size: 36rpx;
  }
}
</style>